<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<title>Contact manager</title>
	<script src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.js" type="text/javascript"></script>
	<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.css"/>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0px;
		}
	</style>	
</head>
<body>
	<script type="text/javascript">
		var contextPath = "${pageContext.request.contextPath}";
		dhtmlx.image_path = contextPath + "/resources/tutorial/common/dhtmlx/imgs/";
		dht
		dhtmlxEvent(window, "load", function() {
			var layout = new dhtmlXLayoutObject(document.body, "2U");
			layout.cells("a").setText("Contacts");
			layout.cells("b").setText("Contact Details");
			layout.cells("b").setWidth(500);

			var menu = layout.attachMenu();
			menu.setIconsPath(contextPath + "/resources/tutorial/common/dhtmlx/icons/");
			menu.loadStruct(contextPath + "/resources/tutorial/tutorial1xml/menu.xml");
			
			var toolbar = layout.attachToolbar();
			toolbar.setIconsPath(contextPath + "/resources/tutorial/common/dhtmlx/icons/");
			toolbar.loadStruct(contextPath + "/resources/tutorial/tutorial1xml/toolbar.xml");
			
			var contactsGrid = layout.cells("a").attachGrid();
			
			contactsGrid.setHeader("Name, Last Name, Email");
			contactsGrid.setColumnIds("fname,lname,email");
			contactsGrid.setInitWidths("250,250,*");
			contactsGrid.setColAlign("left,left,left");
			contactsGrid.setColTypes("ro,ro,ro");
			contactsGrid.setColSorting("str,str,str");
			
			contactsGrid.init();
		
			var tableRequest = $.ajax({
				url: '/bwf/tutorial1/contacts',
				type: 'GET',
				dataType: 'json'
			});
			
			tableRequest.done(function(info) {
				for (var i = 0; i < info.length; i++) {
					oneData = info[i];
					console.log(oneData);
					contactsGrid.addRow(i+1, [oneData['fname'], oneData['lname'], oneData['email']]);
				}
			});
			
			var contactForm = layout.cells("b").attachForm();
			contactForm.loadStruct(contextPath + "/resources/tutorial/tutorial1xml/form.xml");
			contactForm.bind(contactsGrid);
			
			contactForm.attachEvent("onButtonClick", function(name, command) {
				var fname = contactForm.getItemValue("fname");
				var lname = contactForm.getItemValue("lname");
				var email = contactForm.getItemValue("email");
				
				var contactData = {fname:fname, lname:lname, email:email};

				$.ajax({
					url: '/bwf/tutorial1/contacts',
					contentType: 'application/json; charset=UTF-8',
					type: 'POST',
					data: JSON.stringify(contactData),
					dataType: 'json'
				}).done(function(done) {
					alert("done");
				});
			});
		});
	</script>
	
</body>
</html>